<template>
  <!-- 鼠标经纬高显示：在左下角显示当前鼠标下的经度、纬度与地表高度 -->
  <div class="mouse-pos" v-if="text">{{ text }}</div>
</template>

<script setup>
// 中文注释：鼠标经纬高显示控件
// - 职责：在地图左下角显示当前鼠标指向位置的经度、纬度与地表高度
// - 说明：高度为近似值，若需高精度可改为采样地形（sampleTerrainMostDetailed）
import { inject, onMounted, onBeforeUnmount, ref } from "vue";
import * as Cesium from "cesium";

const CESIUM_VIEWER_KEY = "cesiumViewer";
// 变量：注入的 viewer 引用（ref）
const viewerRef = inject(CESIUM_VIEWER_KEY, null);

// 变量：展示在控件上的文本
const text = ref("");
let removeHandler = null;

onMounted(() => {
  const viewer = viewerRef && viewerRef.value;
  if (!viewer) return;
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    const cartesian = viewer.camera.pickEllipsoid(
      movement.endPosition,
      viewer.scene.globe.ellipsoid
    );
    if (!cartesian) {
      text.value = "";
      return;
    }
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
    const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
    // 计算地表高度（近似，若需要精确可使用 sampleTerrainMostDetailed）
    const height = (viewer.scene.globe.getHeight(cartographic) || 0).toFixed(1);
    text.value = `经度：${lon}，纬度：${lat}，高度：${height}m`;
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  removeHandler = () => handler.destroy();
});

onBeforeUnmount(() => {
  if (removeHandler) removeHandler();
});
</script>

<style scoped>
.mouse-pos {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  z-index: 10;
  font-size: 12px;
}
</style>


